<template>
  <div>
    <div class="_title">
      <div class="title_logo"></div>
      <div style="width: 1px; height: 37px; border: 1px solid #c3e3ff; margin: 0 20px"></div>
      <p>{{ childTitle }}</p>
      <div class="backHome" @click="backHome" v-show="childTitle">返回主页</div>
      <span class="pbtn" @click="exitLogin">
        <i></i>
        <em style="font-family: Microsoft YaHei; font-weight: 400; font-size: 18px; color: #ffffff"
          >登出</em
        >
      </span>
    </div>
    <div class="_menu" v-show="!childTitle">
      <ul>
        <li>
          <span :class="[route.path == '/index' ? 'menuAct' : '']">
            <p>主页</p>
          </span>
        </li>
        <li v-for="item in sysDaoHang.topMenu" @click="changeMenu(item)">
          <span :class="[item.label == childTitle ? 'menuAct' : '']">
            <p>
              {{ item.label }}
            </p>
          </span>
          <div
            v-show="!(item.label == '桌面管理')"
            style="
              width: 1px;
              height: 37px;
              border: 1px solid #c3e3ff;
              right: 0;
              position: absolute;
            "
          ></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRef, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import apisyw from '@/api/index_yw.js'
const _apiyw = apisyw()
const store = useStore()

const route = useRoute()
const router = useRouter()
//数据仓库库

const { childTitle, _showPage, _ifUrl } = storeToRefs(store)
// const { childTitle } = toRef(store.state)

const menuItem = route.matched[0].children
// const menuPath = ref(route.path)
const sysDaoHang = ref([])
const getYW_menu = () => {
  let url = _ywHtml + '/system/role/SchoolNav/' + localStorage.getItem('userId')
  _apiyw.hDoGet(url, '', '', (res) => {
    sysDaoHang.value = res.data
  })
}
const changeMenu = (n) => {
  console.log(n)
  if (n.system == 1) {
    var url =
      _jwHtml +
      n.url +
      '?fesf=' +
      JSON.parse(localStorage.getItem('LocalData')).access_token +
      '&&id=' +
      n.parentId
  } else {
    var url =
      _ywHtmlTz + n.url + '?fesf=' + JSON.parse(localStorage.getItem('Admin-Token')).admin_token
  }
  _showPage.value = true
  // setTimeout(() => {
  _ifUrl.value = url

  // }, 10000)
  childTitle.value = n.label
  // console.log(url)

  // store.childTitle = item.meta.title
}

const exitLogin = () => {
  localStorage.removeItem('LocalData')
  router.push('/Login')
}

// 返回主页
const backHome = () => {
  _showPage.value = false
  childTitle.value = ''

  // router.push('/Login')
}

onMounted(() => {
  getYW_menu()
})
</script>

<style lang="scss" scoped>
._title {
  width: 100%;
  height: 60px;
  background: #5db4ff;
  padding: 1px;
  position: relative;
  display: flex;
  align-items: center;

  .title_logo {
    width: 378px;
    height: 60px;
    background-image: url('/imgs/login/xx_logo.png');
    background-position: center;
    background-repeat: no-repeat;
  }
  .backHome {
    width: 91px;
    height: 34px;
    background: #41a3f8;
    border-radius: 4px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 20px;
  }
  span {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    i {
      width: 19px;
      height: 17px;
      background-image: url(/imgs/index/登出.png);
      margin-right: 5px;
    }
  }

  p {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 22px;
    color: #ffffff;
  }
}
._menu {
  width: 100%;
  height: 60px;
  background: #41a3f8;
  padding: 1px;

  ul {
    display: flex;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      width: 100px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      position: relative;
      span {
        p {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 20px;
          color: #efefef;
        }
      }
      .menuAct {
        border-bottom: 8px solid #ffffff;

        p {
          color: #fff280;
        }
      }
    }
  }
}
</style>
